<template>
  <xy-page title="集团列表">
    <!-- <xy-search class="mgt20" @enter="search(1)">
      <el-form inline :model="searchFilter" label-width="70px">
   
      </el-form>
      <div slot="right">
        <el-button type="primary" @click="search(1)">查询</el-button>
        <el-button plain @click="resetForm">清空条件</el-button>
      </div>
    </xy-search> -->

  <div class="system-index-btns mgb20">
      <el-button type="primary" icon="icon-scrappy-add" @click="editRow()" v-auth="'AUTH_COMPANY-SAVE'">新建集团</el-button>
    </div>
    <!-- 列表区域-STR -->
    <xy-table :loading="listData.showLoading" :tableData="listData.tableData" @change="search" v-show="!listData.firtIn">
      <el-table-column min-width="30px" prop="id" label="流水号"></el-table-column>
      <el-table-column min-width="70px" prop="name" label="集团名字"></el-table-column>
      <el-table-column min-width="70px" prop="shortName" label="集团别名"></el-table-column>
      <el-table-column min-width="110px" prop="account" label="账号"></el-table-column>
      <el-table-column min-width="90px"  label="创建时间">
         <template slot-scope="scope">
           {{scope.row.createTime | date}}
        </template>
      </el-table-column>
      <el-table-column min-width="70px" prop="createName" label="创建人"></el-table-column>

      <el-table-column min-width="80px" label="更多">
        <template slot-scope="scope" v-if="scope.row.type != 0">
          <el-button @click="editRow(scope.row)" type="text" v-auth="'AUTH_COMPANY-SAVE'">编辑</el-button>
        </template>
      </el-table-column>
    </xy-table>
    <!-- 列表区域-END -->

    <!-- 保存记录-STR -->
    <el-dialog :title="editDialog.data.id?'修改':'添加'+editDialog.title" :visible.sync="editDialog.show" class="modal-resetpwd">
      <div class="form-row form-group " v-if="!editDialog.data.id">
        <label class="text-right">
          <span class="require">*</span>集团名字:</label>
        <el-input v-model="editDialog.data.name" type="test" placeholder="请输入集团名字"></el-input>
        <span class="errmsg">{{editDialog.errmsg.name}}</span>
      </div>

      <div class="form-row form-group " v-if="!editDialog.data.id">
        <label class="text-right">
          <span class="require">*</span>集团简称:</label>
        <el-input v-model="editDialog.data.shortName" type="test" placeholder="请输入集团简称"></el-input>
        <span class="errmsg">{{editDialog.errmsg.shortName}}</span>
      </div>

      <div class="form-row form-group " v-if="!editDialog.data.id">
        <label class="text-right">
          <span class="require">*</span>集团账号:</label>
        <el-input v-model="editDialog.data.account" type="test" placeholder="请输入集团账号"></el-input>
        <span class="errmsg">{{editDialog.errmsg.descript}}</span>
      </div>

      <div class="form-row form-group ">
        <label class="text-right">
          <span class="require">*</span>appId:</label>
        <el-input v-model="editDialog.data.ext.appId" type="test" placeholder="请输入集团appId"></el-input>
        <span class="errmsg">{{editDialog.errmsg.descript}}</span>
      </div>

      <div class="form-row form-group ">
        <label class="text-right">
          <span class="require">*</span>appSecret:</label>
        <el-input v-model="editDialog.data.ext.appSecret" type="test" placeholder="请输入集团appSecret"></el-input>
        <span class="errmsg">{{editDialog.errmsg.descript}}</span>
      </div>

      <div class="form-row form-group " v-if="!editDialog.data.id">
        <label class="text-right">
          <span class="require">*</span>关联系统:</label>
        <el-select v-model="editDialog.data.appId" placeholder="请选择系统">
            <el-option v-for="item in appList" :key="item.id" :label="item.cnName" :value="item.id">
            </el-option>
          </el-select>
        <span class="errmsg">{{editDialog.errmsg.descript}}</span>
      </div>

      <div slot="footer" class="dialog-footer">
        <xy-save v-model="editDialog.save" type="primary" @click="saveDialog">确 定</xy-save>
        <el-button  @click="editDialog.show = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 保存记录-END -->
  </xy-page>
</template>

<script>
export default {
  name:"auth-app-list",
  data() {
    return {
      appList:[],
      searchFilter: {
      },
      listData: {
        firtIn: true,
        tableData: {
          total: 0,
          page: 1,
          size: 15,
          list: []
        },
        showLoading: false
      },
      editDialog:{
        title:"集团",
        url:"/admin/auth/instance/authCompany/save.do",
        data:{
          name:"",
          shortName:"",
          account:"",
          ext:{
            appId:"",
            appSecret:""
          }
        },
        errmsg:{
           name:"",
           shortName:"",
           account:""
        },
        save:false,
        show:false
      }
    };
  },
  methods: {
    search(page) {
      page = page || this.listData.tableData.page;
      this.listData.firtIn = false;
      var param = {
        page: page || 1, //	Int	是	当前页
        displayRecord: this.listData.tableData.size
      };

      this.listData.tableData.list = [];
      this.listData.showLoading = true;

      this.$postStream("/admin/auth/instance/authCompany/list.do", {
        data: param,
        success: res => {
          this.listData.showLoading = false;
          if (res.success) {
            this.listData.tableData.list = res.object.list || [];
            this.listData.tableData.total = res.object.count;
            this.listData.tableData.page = page || 1
          } else {
            this.$message.error(res.message);
          }
        },
        error: () => {
          this.listData.showLoading = false;
        }
      });
    },
    resetForm() {
      this.searchFilter = {
      };
      this.search(1);
    },
    editRow(row){
      row = row || this.$options.data().editDialog.data;
      row.ext = row.ext || this.$options.data().editDialog.data.ext;
      this.editDialog.data = JSON.parse(JSON.stringify(row));
      try{
      this.editDialog.data.ext = JSON.parse(this.editDialog.data.ext);
      }catch(e){}
      for(var key in this.editDialog.errmsg){
        this.editDialog.errmsg[key] = "";
      }
      this.editDialog.show = true;
    },
    saveDialog(){
      this.editDialog.save = true;
      var data = this.editDialog.data;
      try{
        data = JSON.parse(JSON.stringify(data));
        data.ext = JSON.stringify(data.ext);
      }catch(e){}
      this.$postStream(this.editDialog.url, {
        data:data,
        success: res => {
          if(res.success){
            this.$message.warning(res.message);
            this.editDialog.show = false;
            this.search();
          }else{
            this.$message.error(res.message);
          }
          this.editDialog.save = false;
        },error: () => {
          this.editDialog.save = false;
        }
      });
    }
  },
  mounted() {
    this.search(1);
    this.$postStream("/admin/auth/instance/authApp/list.do", {
      data: {},
      success: res => {
        if (res.success) {
          this.appList = res.object.list || [];
        } else {
          this.$message.error(res.message);
        }
      },
      error: () => {}
    });
  }
};
</script>

<style lang="scss">
@import "../../../assets/scss/variable.scss";
.system-index-btns {
    text-align: right;
    & i {
      font-size: 12px;
      margin-right: 8px;
      vertical-align: top;
    }
    & span {
      display: inline-block;
      vertical-align: top;
    }
  }
.device-info {
  .device-info-body {
    margin: 15px 15px 70px;
  }
  .el-dialog__header {
    border-bottom: 1px solid $xy-border-color-base;
  }
  .info-line {
    margin-bottom: 10px;
    span {
      display: inline-block;
      padding: 5px 0;
      color: $xy-text-color-primary;
      font-size: 14px;
      line-height: 24px;
    }
    span.name {
      min-width: 110px;
      line-height: 24px;
    }
  }
}
</style>
